<template>
    <div class="app-container">
        <el-card class="departmentCard">
            <div class="filter-container">
                <el-form :inline="true">
                    <el-form-item label="告警级别">
                        <el-select @change="selectLevelChanged" placeholder="请选择" v-model="level">
                            <el-option value="1" label="紧急" />
                            <el-option value="2" label="重要" />
                            <el-option value="3" label="次要" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select @change="selectChanged" placeholder="请选择" v-model="status">
                            <el-option value="1" label="处理中" />
                            <el-option value="2" label="已完成" />
                            <el-option value="3" label="已取消" />
                            <el-option value="4" label="挂起" />
                            <el-option value="5" label="所有" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search()">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="reset()">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table stripe :data="tableData" :height="tableHeight" style="width: 100%;margin-bottom: 20px;"
                row-key="alarmID" default-expand-all highlight-current-row
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                <el-table-column prop="alarmName" label="告警名称" align="center" />
                <el-table-column prop="alarmLevel" label="告警级别" align="center" />
                <el-table-column prop="alarmObject" label="告警对象" align="center" width="200px" />
                <el-table-column prop="roadName" label="光缆段名称" align="center" />
                <!-- <el-table-column prop="pileNum" label="桩号" align="center" /> -->
                <!-- <el-table-column prop="longitude" label="经度" align="center" width="160px" />
                <el-table-column prop="latitude" label="纬度" align="center" width="160px" /> -->
                <el-table-column prop="company" label="分公司" align="center" />
                <el-table-column prop="deviceType" label="设施类型" align="center" />
                <el-table-column prop="alarmStatusContent" label="告警状态" align="center" />
                <el-table-column prop="alarmDate" label="告警时间" align="center" width="160px" />
                <el-table-column label="操作" align="center" fixed="right" width="120px">
                    <template slot-scope="scope">
                        <el-button type="text" @click="view(scope.$index)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <!-- <el-pagination :current-page.sync="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="totalSize" @size-change="handleSizeChange" /> -->
        </el-card>

        <!-- 详情 -->
        <!-- <AlarmDetail v-if="showAlarmDetail" :form="form" :show-draw-list="showAlarmDetail" @back="back" /> -->
    </div>
</template>

<script>
// import alarm from '../../../../alarm.js'
export default {
    data() {
        return {
            tableHeight: innerHeight - 370,
            currentPage: 1,
            pageSize: 10,
            totalSize: 0,
            status: '',
            level: '',
            tableData: [{
                alarmID: 1,
                alarmName: '纤芯告警',//告警名称
                alarmLevel: '紧急告警',//告警级别
                alarmObject: '一期监测设备',//告警对象
                alarmArea: '鄢陵收费站',//告警区域
                alarmContent: '断纤告警：鄢陵收费站-兰南枢纽，[纤芯编号]：1',//告警描述
                roadName: '鄢陵收费站-兰南枢纽',//光缆段名称
                alarmAddr: '盐洛高速鄢陵收费站',
                // pileNum: 'K485+90',//桩号
                // longitude: "114.33756884679124",//经度
                // latitude: "34.84435271219267",//纬度
                company: "郑州分公司",//所属分公司
                deviceType: "OTDR",//设施类型
                alarmDate: "2023-05-01 17:43:32",//告警时间
                alarmStatusContent: "已完成",//告警状态 文字
                alarmStatus: 6,//告警状态
                masterMaintenance: "张伟",//主维修人员
                slaveMaintenance: "巩凡",//辅助维修人员
                car: "豫A123456",//车辆信息
                maintenanceMoney: "280000元",//维修预算金额
                inventoryList: "",//维修账目清单
                faultCause: '外力因素引发的线路故障'//故障原因
            },
            {
                alarmID: 2,
                alarmName: '纤芯告警',//告警名称
                alarmLevel: '紧急告警',//告警级别
                alarmObject: '二期监测设备',//告警对象
                alarmArea: '鄢陵收费站',//告警区域
                alarmContent: '断纤告警：巩义南-涉村，[纤芯编号]：1',//告警描述
                roadName: '巩义南-涉村',//光缆段名称
                alarmAddr: '焦唐高速巩登段巩义南收费站',
                // pileNum: 'K49+300',//桩号
                // longitude: "114.33756884679124",//经度
                // latitude: "34.84435271219267",//纬度
                company: "郑州分公司",//所属分公司
                deviceType: "OTDR",//设施类型
                alarmDate: "2023-05-01 17:42:32",//告警时间
                alarmStatusContent: "已签收",//告警状态 文字
                alarmStatus: 3,//告警状态
                masterMaintenance: "张三",//主维修人员
                slaveMaintenance: "李四",//辅助维修人员
                car: "豫A123456",//车辆信息
                maintenanceMoney: "280000元",//维修预算金额
                inventoryList: "",//维修账目清单
                faultCause: '挖机施工挖断'//故障原因
            }
            ]
        }
    },
    mounted() {
        // window.name = 'alarm'
        // this.getJsonData()
        this.initAlarm()//清除LocalStorage本地数据，演示使用，正式开发去除
    },
    methods: {
        initAlarm() {
            localStorage.clear()
            //保存localStorage数据
            for (let i = 0; i < this.tableData.length; i++) {
                localStorage.setItem("alarm_" + i, JSON.stringify(this.tableData[i]))
            }
            // console.log(localStorage.getItem("alarm_1"));
            // window.location.reload()
        },
        selectChanged(i) {
            this.status = i
        },
        selectLevelChanged(i) {
            this.level = i
        },
        // getJsonData() {
        //     let map = JSON.stringify(alarm)
        //     this.tableData = JSON.parse(map)
        // },
        view(row) {
            let routeData = this.$router.resolve({ path: '/alarmDetail', query: { id: row } })
            console.log(routeData.href);
            window.open(routeData.href, '_blank')
            // this.showAlarmDetail = true
        },
        back() {
            window.location.reload()
            // this.showAlarmDetail = false
        }
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    display: flex;
    justify-content: space-between;
    min-height: calc(100vh - 80px);

    .orgCard {
        width: 20%;
        min-height: 100%;
    }

    .departmentCard {
        // width: calc(80% - 20px);
        width: 100%;
    }
}

.handle {
    display: flex;
    justify-content: flex-end;
}
</style>
<style>
.has-gutter tr th {
    background: #e1e6f1 !important;
    color: #767fa2;
}

.el-table {
    color: #28356c;
}

.DrawingGeneration .el-table__header,
.DrawingGeneration .el-table__body {
    width: calc(80% - 20px);
}
</style>